<template>
    <a-layout class="layout">
        <a-layout-header class="header-layout">
            <div class="header-container">
                <div class="title">
                    人脸检测展示
                </div>
                <a-menu
                    v-model:selectedKeys="selectedKeys"
                    theme="dark"
                    mode="horizontal"
                >
                    <a-menu-item key="1" @click="toImageDetect">图片检测</a-menu-item>
                    <a-menu-item key="2" @click="toVideoDetect">实时检测</a-menu-item>
                </a-menu>
            </div>
        </a-layout-header>
        
        <a-layout-content class="body-layout">
            <router-view></router-view>
        </a-layout-content>
        
        <a-layout-footer class="footer-layout">
            Face Detect ©2023 Created by LibraStalker
        </a-layout-footer>
    </a-layout>
</template>
<script lang="ts">
    import {defineComponent, ref, onMounted} from 'vue';
    import {useRoute, useRouter} from "vue-router";
    
    export default defineComponent({
        setup() {
            let selectedKeys = ref<string[]>(['1']);
            
            const route = useRoute();
            const router = useRouter();
            
            const toImageDetect = (() => {
                router.push({
                    name: 'image-detect'
                })
            })
            const toVideoDetect = (() => {
                router.push({
                    name: 'video-detect'
                })
            })
            
            onMounted(() => {
                toImageDetect();
            })
            
            return {
                selectedKeys,
                toImageDetect,
                toVideoDetect
            };
        },
    });
</script>
<style>
    .layout {
        height: 100vh;
    }
    
    .header-layout {
        height: 0.64rem !important;
        width: 100%;
        padding: 0 0.3rem !important;
        
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .body-layout {
        height: calc(100vh - 1.34rem);
        width: 100%;
        padding: 0.3rem 0.3rem 0;
        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .footer-layout {
        height: 0.7rem;
        width: 100%;
        
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .header-layout .header-container {
        width: 100%;
        
        display: flex;
        justify-content: space-between;
    }
    
    .header-layout .title {
        color: #fff;
        font-size: 0.2rem;
    }
    
</style>
